<template>
  <div class="home">
    <!-- 自带信息 -->
    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <!-- 时间显示 -->
    <homeHeader></homeHeader>
    <div class="home-main">
      <!-- 左边导航 -->
      <div class="home-main-left">
        <ul>
          <li :class="{ leftColor: flag }" @click="flag = true">
            主页
          </li>
          <li :class="{ leftColor: flag == false }" @click="flag = false">
            航线调度
          </li>
        </ul>
      </div>
      <!-- 右边详细 -->
      <div class="home-main-right">
        <homepack v-if="flag == true"></homepack>
        <shipCourse v-else></shipCourse>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// 插件引入
import homeHeader from "../components/header.vue";
import homepack from "../components/homepack.vue";
import shipCourse from "../components/shipCourse";

export default {
  name: "Home",
  components: {
    homeHeader,
    homepack,
    shipCourse
  },
  data() {
    return {
      flag: true
    };
  }
};
</script>

<style lang="less" scoped>
// @import '../assets/css/home.less';
.home {
  width: 1200px;
  height: 800px;
  margin: 0 auto;
  overflow: hidden;

  .home-main {
    display: flex;
    height: 770px;

    .home-main-left {
      width: 100px;
      height: 100%;
      background: #707277;
      box-sizing: border-box;

      ul {
        li {
          width: 100px;
          line-height: 60px;
          color: #eee;
          font-weight: 600;
          border-bottom: 1px solid #bbb;
          box-sizing: border-box;
          padding: 0 15px;
          border-radius: 0 4px 4px 0;
        }
        li.leftColor {
          background: #fff;
          color: #606266;
        }
      }
    }
    .home-main-right {
      flex-grow: 1;
    }
  }
}
</style>
